<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贝壳OC智能应用中心</title>
    <meta name="description" content="“传承  共创  生长 文化在这里流动，打开壳，看见贝壳人的光”">
    <meta name="keywords" content="贝壳OC, 智能应用, 科技, 智能服务, 创新工具">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="enhanced-styles-new.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="贝壳OC智能应用中心">
    <meta property="og:description" content="探索最新的创新工具和实验，体验前沿科技与服务">
    <meta property="og:type" content="website">

    <!-- Performance optimizations -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
</head>

<body>
    <!-- 页面加载动画 -->
    <div class="page-loader">
        <div class="loader-logo">
            <div class="loader-circle"></div>
            <div class="loader-circle"></div>
            <div class="loader-circle"></div>
        </div>
    </div>

    <!-- 滚动指示器 -->
    <div class="scroll-indicator" id="scrollTop">
        <span></span>
    </div>

    <!-- Header removed to eliminate top margin -->

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-background"></div>
        <div class="hero-particles" id="particles-js"></div>
        <!-- 替换整个hero-content部分 -->
        <div class="hero-content">
            <div class="center-text">
                <h1 class="hero-title-orbital">贝壳OC智能应用中心</h1>
                <p class="hero-subtitle-orbital">传承·共创·生长</p>
                <p class="hero-description-orbital">文化在这里流动，打开壳，看见贝壳人的光</p>
            </div>
            <div class="values-orbit">
                <span class="value-satellite">我承诺，我做到</span>
                <span class="value-satellite">长期主义、慢就是快、不走捷径</span>
                <span class="value-satellite">对事不对人&直言有讳</span>
                <span class="value-satellite">不唯上</span>
                <span class="value-satellite">不博弈、相信的力量</span>
                <span class="value-satellite">胜则举杯相庆，败则拼死相救</span>
                <span class="value-satellite">逐利而不唯利</span>
                <span class="value-satellite">仰望星空，脚踏实地</span>
                <span class="value-satellite">有理让三分</span>
                <span class="value-satellite">向内归因</span>
                <span class="value-satellite">敬畏规则</span>
                <span class="value-satellite">脚底沾泥</span>
            </div>
        </div>

        <!-- 删除下面整个重复的.culture-values-orbital部分 -->
        <div class="culture-values-orbital">
            <div class="value-particle" data-text="长期主义"></div>
            <div class="value-particle" data-text="慢就是快"></div>
            <!-- 将所有value-particle的data-text属性改为直接显示 -->
            <div class="values-orbit">
                <div class="value-satellite">对事不对人&直言有讳</div>
                <div class="value-satellite">不唯上</div>
                <div class="value-satellite">逐利而不唯利</div>
                <div class="value-satellite">敬畏规则</div>
                <div class="value-satellite">脚底沾泥</div>
                <div class="value-satellite">仰望星空，脚踏实地</div>
                <div class="value-satellite">有理让三分</div>
                <div class="value-satellite">向内归因</div>
                <div class="value-satellite">胜则举杯相庆，败则拼死相救</div>
                <div class="value-satellite">我承诺，我做到</div>
                <div class="value-satellite">不博弈、相信的力量</div>
            </div>
        </div>
        </div>
    </section>

    <!-- Recommended Tools - GenSpark Style -->
    <section id="ai-tools" class="recommended">
        <div class="container">
            <div class="section-title-wrapper">
                <h2>推荐AI工具</h2>
                <p class="section-subtitle">使用最新人工智能技术的实用工具</p>

            </div>

            <div class="tools-showcase">
                <!-- 重新组织的工具网格 -->
                <div class="tools-grid">
                    <!-- 第一排：3个卡片 -->
                    <div class="tool-card" data-category="文化传播" onclick="window.location.href='chat.html'"
                        style="cursor: pointer;">
                        <!-- 智能问答卡片内容保持不变 -->
                        <div class="tool-header">
                            <div class="tool-icon">📝</div>
                            <div class="tool-status">热门</div>
                        </div>
                        <div class="tool-content">
                            <h3>智能问答</h3>
                            <p>以文化视角深入拆解公司目标，围绕特定主题生成多样化传播内容的智能体，助力公司文化的全方位、多角度传播。</p>
                        </div>
                        <div class="tool-footer">
                            <button class="tool-btn"
                                onclick="event.stopPropagation(); window.location.href='chat.html'">开始使用</button>
                            <div class="tool-preview" onclick="event.stopPropagation();">
                                <span class="preview-text">预览</span>
                                <div class="preview-icon">👁️</div>
                            </div>
                        </div>
                        <!-- 预览模态框保持不变 -->
                    </div>

                    <div class="tool-card" data-category="创意内容" onclick="window.location.href='culture-image.html'"
                        style="cursor: pointer;">
                        <!-- 文化图片卡片内容保持不变 -->
                        <div class="tool-header">
                            <div class="tool-icon">🎨</div>
                            <div class="tool-status">推荐</div>
                        </div>
                        <div class="tool-content">
                            <h3>文化图片</h3>
                            <p>搜索贝壳文化及历史图片</p>
                        </div>
                        <div class="tool-footer">
                            <button class="tool-btn"
                                onclick="event.stopPropagation(); window.location.href='culture-image.html'">搜索图片</button>
                            <div class="tool-preview" onclick="event.stopPropagation();">
                                <span class="preview-text">预览</span>
                                <div class="preview-icon">👁️</div>
                            </div>
                        </div>
                        <!-- 预览模态框保持不变 -->
                    </div>


                    <!-- 第二排：2个卡片（第4、5、6位置） -->
                    <div class="tool-card" data-category="视频生成" style="cursor: pointer; opacity: 0.8;">
                        <!-- OC视频创作卡片内容保持不变 -->
                        <div class="tool-header">
                            <div class="tool-icon">🎬</div>
                            <div class="tool-status" style="background: linear-gradient(45deg, #ff6b6b, #ffa500);">正在开发
                            </div>
                        </div>
                        <div class="tool-content">
                            <h3>OC视频创作</h3>
                            <p>根据文本描述自动生成逼真的视频场景，让创意想法快速转化为视觉内容。</p>
                        </div>
                        <div class="tool-footer">
                            <button class="tool-btn" disabled
                                style="background: #ccc; cursor: not-allowed;">即将上线</button>
                            <div class="tool-preview" onclick="event.stopPropagation();">
                                <span class="preview-text">预览</span>
                                <div class="preview-icon">👁️</div>
                            </div>
                        </div>
                    </div>

                    <!-- 第二排：2个卡片（第4、5、6位置） -->
                    <div class="tool-card" data-category="内容创作" onclick="window.location.href='interview-writing.html'"
                        style="cursor: pointer;">
                        <!-- 稿件访谈卡片 -->
                        <div class="tool-header">
                            <div class="tool-icon">📝</div>
                            <div class="tool-status">热门</div>
                        </div>
                        <div class="tool-content">
                            <h3>稿件访谈</h3>
                            <p>生成智能问答、稿件访谈、访谈问题，助力内容创作者高效产出专业访谈内容。</p>
                        </div>
                        <div class="tool-footer">
                            <button class="tool-btn"
                                onclick="event.stopPropagation(); window.location.href='interview-writing.html'">开始使用</button>
                            <div class="tool-preview" onclick="event.stopPropagation();">
                                <span class="preview-text">预览</span>
                                <div class="preview-icon">👁️</div>
                            </div>
                        </div>
                        <!-- 预览模态框保持不变 -->
                    </div>

                    <!-- 留空位置（第5个卡片位置）-->

                    <!-- 活动策划卡片 - 第二排第二个（第6个卡片） -->
                    <div class="tool-card" data-category="活动策划" onclick="window.location.href='activity-planning.html'"
                        style="cursor: pointer;">
                        <div class="tool-header">
                            <div class="tool-icon">🎯</div>
                            <div class="tool-status">热门</div>
                        </div>
                        <div class="tool-content">
                            <h3>活动策划</h3>
                            <p>智能生成活动方案，一键创建完整活动流程，助力高效活动策划与执行。</p>
                        </div>
                        <div class="tool-footer">
                            <button class="tool-btn"
                                onclick="event.stopPropagation(); window.location.href='activity-planning.html'">开始使用</button>
                            <div class="tool-preview" onclick="event.stopPropagation();">
                                <span class="preview-text">预览</span>
                                <div class="preview-icon">👁️</div>
                            </div>
                        </div>
                        <div class="tool-preview-modal" onclick="event.stopPropagation();">
                            <div class="preview-content">
                                <div class="preview-header">
                                    <h4>活动策划 - 功能预览</h4>
                                    <button class="close-preview">×</button>
                                </div>
                                <div class="preview-body">
                                    <div class="preview-image">
                                        <div class="preview-placeholder">
                                            <div class="preview-icon-large">🎯</div>
                                            <p>活动策划系统界面</p>
                                        </div>
                                    </div>
                                    <div class="preview-description">
                                        <h5>主要功能</h5>
                                        <ul>
                                            <li>智能活动方案生成</li>
                                            <li>活动流程自动规划</li>
                                            <li>预算与资源优化配置</li>
                                            <li>活动效果预测分析</li>
                                            <li>一键活动模板套用</li>
                                        </ul>
                                        <button class="tool-btn preview-btn">敬请期待</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 社区百宝箱功能已移除 -->
                </div>
            </div>


        </div>
    </section>

    <!-- AI工具箱模块 -->
    <section id="ai-toolbox" class="ai-toolbox">
        <div class="container">
            <div class="section-title-wrapper">
                <h2>AI工具箱</h2>
                <p class="section-subtitle">精选优质AI产品，一键直达官方平台</p>
            </div>

            <div class="toolbox-grid">
                <!-- 第一排 -->
                <div class="toolbox-row">
                    <!-- DeepSeek -->
                    <div class="toolbox-card" onclick="window.open('https://www.deepseek.com/', '_blank')">
                        <div class="toolbox-logo deepseek-logo">
                            <span>🔍</span>
                        </div>
                        <h3>DeepSeek</h3>
                    </div>

                    <!-- Kimi -->
                    <div class="toolbox-card" onclick="window.open('https://kimi.moonshot.cn/', '_blank')">
                        <div class="toolbox-logo kimi-logo">
                            <span>🌙</span>
                        </div>
                        <h3>Kimi</h3>
                    </div>

                    <!-- 文心一言 -->
                    <div class="toolbox-card" onclick="window.open('https://yiyan.baidu.com/', '_blank')">
                        <div class="toolbox-logo wenxin-logo">
                            <span>📝</span>
                        </div>
                        <h3>文心一言</h3>
                    </div>

                    <!-- 通义千问 -->
                    <div class="toolbox-card" onclick="window.open('https://tongyi.aliyun.com/', '_blank')">
                        <div class="toolbox-logo tongyi-logo">
                            <span>🧠</span>
                        </div>
                        <h3>通义千问</h3>
                    </div>
                </div>

                <!-- 第二排 -->
                <div class="toolbox-row">
                    <!-- ChatGPT -->
                    <div class="toolbox-card" onclick="window.open('https://chat.openai.com/', '_blank')">
                        <div class="toolbox-logo chatgpt-logo">
                            <span>�</ /span>
                        </div>
                        <h3>ChatGPT</h3>
                    </div>

                    <!-- Claude -->
                    <div class="toolbox-card" onclick="window.open('https://claude.ai/', '_blank')">
                        <div class="toolbox-logo claude-logo">
                            <span>🤖</span>
                        </div>
                        <h3>Claude</h3>
                    </div>

                    <!-- 豆包 -->
                    <div class="toolbox-card" onclick="window.open('https://www.doubao.com/', '_blank')">
                        <div class="toolbox-logo doubao-logo">
                            <span>🎒</span>
                        </div>
                        <h3>豆包</h3>
                    </div>

                    <!-- 即梦 -->
                    <div class="toolbox-card" onclick="window.open('https://jimeng.jianying.com/', '_blank')">
                        <div class="toolbox-logo jimeng-logo">
                            <span>🎬</span>
                        </div>
                        <h3>即梦</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-links">
                    <a href="#">隐私政策</a>
                    <a href="#">使用条款</a>
                    <a href="#">关于我们</a>
                    <a href="#">产品</a>
                </div>
                <div class="footer-info">
                    <p>&copy; 2024 贝壳OC智能应用中心 版权所有</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="particles.js"></script>
    <script src="script.js"></script>
    <script src="enhanced-interactions.js"></script>

    <!-- GenSpark风格的工具卡片交互 -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 工具卡片3D倾斜效果
            const cards = document.querySelectorAll('.tool-card');

            cards.forEach(card => {
                card.addEventListener('mousemove', function (e) {
                    const rect = this.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;

                    const centerX = rect.width / 2;
                    const centerY = rect.height / 2;

                    const rotateX = (y - centerY) / 20;
                    const rotateY = (centerX - x) / 20;

                    this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(5px)`;

                    // 添加光影效果
                    const glare = this.querySelector('.card-glare') || document.createElement('div');
                    if (!glare.classList.contains('card-glare')) {
                        glare.classList.add('card-glare');
                        this.appendChild(glare);
                    }

                    const glareX = (x / rect.width) * 100;
                    const glareY = (y / rect.height) * 100;
                    glare.style.background = `radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 80%)`;
                });

                card.addEventListener('mouseleave', function () {
                    this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
                    const glare = this.querySelector('.card-glare');
                    if (glare) {
                        glare.style.opacity = '0';
                    }
                });
            });

            // 工具卡片预览功能
            const previewButtons = document.querySelectorAll('.tool-preview');
            const closeButtons = document.querySelectorAll('.close-preview');
            const previewModals = document.querySelectorAll('.tool-preview-modal');
            const previewActionButtons = document.querySelectorAll('.preview-btn');

            // 打开预览模态框
            previewButtons.forEach(button => {
                button.addEventListener('click', function (e) {
                    e.stopPropagation();
                    const card = this.closest('.tool-card');
                    const modal = card.querySelector('.tool-preview-modal');

                    // 添加动画类
                    modal.classList.add('active');

                    // 阻止滚动
                    document.body.style.overflow = 'hidden';
                });
            });

            // 关闭预览模态框
            closeButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const modal = this.closest('.tool-preview-modal');
                    modal.classList.remove('active');

                    // 恢复滚动
                    document.body.style.overflow = '';
                });
            });

            // 点击模态框外部关闭
            previewModals.forEach(modal => {
                modal.addEventListener('click', function (e) {
                    if (e.target === this) {
                        this.classList.remove('active');
                        document.body.style.overflow = '';
                    }
                });
            });

            // 预览按钮点击事件
            previewActionButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const modal = this.closest('.tool-preview-modal');
                    const card = modal.closest('.tool-card');
                    const toolBtn = card.querySelector('.tool-btn');

                    // 关闭模态框
                    modal.classList.remove('active');
                    document.body.style.overflow = '';

                    // 触发工具按钮点击
                    toolBtn.click();
                });
            });
        });
    </script>
   